<!-- 企业工商信息组件 -->
<template>
  <div class="enterprise-info">
    <TitleBox title="企业工商信息" />
    <div style="padding: 0 100px" class="enterprise-info-table">
      <a-form ref="currFormRef" :model="currForm" auto-label-width>
        <table border="1" cellspacing="0">
          <tbody>
            <tr
              :style="{
                height: '214px',
              }"
            >
              <td>
                <a-form-item> 营业执照 </a-form-item>
              </td>
              <td colspan="5">
                <!-- <a-upload draggable action="/" tip="请上传营业执照"> </a-upload> -->
                <UploadFile
                  :draggable="true"
                  ref="FileRef"
                  v-model:file-list="fileList"
                  listType="picture"
                  :isShowRemove="type === 'add'"
                  :disabled="type !== 'add'"
                ></UploadFile>
              </td>
            </tr>
            <tr>
              <td>
                <a-form-item field="unifiedSocialCreditCodes">
                  统一社会信用代码
                </a-form-item>
              </td>
              <td>
                <a-input
                  v-model="currForm.unifiedSocialCreditCodes"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>
                <a-form-item field="enterpriseName"> 企业名称 </a-form-item>
              </td>
              <td colspan="3">
                <a-input
                  v-model="currForm.enterpriseName"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
            </tr>

            <tr>
              <td>法定代表人</td>
              <td>
                <a-input
                  v-model="currForm.legalRepresentative"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>登记状态</td>
              <td>
                <a-input
                  v-model="currForm.registrationStatus"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>成立日期</td>
              <td>
                <a-date-picker
                  value-format="x"
                  v-model="currForm.establishmentDate"
                  :disabled="type !== 'add' && !isEdit"
                />
              </td>
            </tr>

            <tr>
              <td>注册资本</td>
              <td>
                <a-input
                  v-model="currForm.registeredCapital"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>实缴资本</td>
              <td>
                <a-input
                  v-model="currForm.paidCapital"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>核准日期</td>
              <td>
                <a-date-picker
                  value-format="x"
                  v-model="currForm.approvalDate"
                  :disabled="type !== 'add' && !isEdit"
                />
              </td>
            </tr>

            <tr>
              <td>组织机构代码</td>
              <td>
                <a-input
                  v-model="currForm.organizationCode"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>工商注册号</td>
              <td>
                <a-input-number
                  :min="1"
                  v-model="currForm.businessNo"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input-number>
              </td>
              <td>
                <a-form-item> 纳税人识别号 </a-form-item>
              </td>
              <td>
                <a-input-number
                  :min="1"
                  v-model="currForm.taxpayerNo"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input-number>
              </td>
            </tr>

            <tr>
              <td>企业类型</td>
              <td>
                <a-input
                  v-model="currForm.enterpriseType"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>营业期限</td>
              <td>
                <a-input
                  v-model="currForm.operationTerm"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>纳税人资质</td>
              <td>
                <a-input
                  v-model="currForm.taxpayerQualification"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
            </tr>

            <tr>
              <td>所属行业</td>
              <td>
                <a-input
                  v-model="currForm.industrySector"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>所属地区</td>
              <td>
                <a-input
                  v-model="currForm.localArea"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>登记机关</td>
              <td>
                <a-input
                  v-model="currForm.registrationAuthority"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
            </tr>

            <tr>
              <td>人员规模</td>
              <td>
                <a-input
                  v-model="currForm.personnelSize"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>参保人数</td>
              <td>
                <a-input-number
                  :min="1"
                  v-model="currForm.insuredPeople"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input-number>
              </td>
              <td>曾用名</td>
              <td>
                <a-input
                  v-model="currForm.formerName"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
            </tr>

            <tr>
              <td>英文名</td>
              <td colspan="3">
                <a-input
                  v-model="currForm.englishName"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
              <td>进出口企业代码</td>
              <td>
                <a-input
                  v-model="currForm.enterpriseCode"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
            </tr>

            <tr>
              <td>注册地址</td>
              <td colspan="5">
                <a-input
                  v-model="currForm.registeredAddress"
                  :disabled="type !== 'add' && !isEdit"
                ></a-input>
              </td>
            </tr>

            <tr>
              <td>经营</td>
              <td colspan="5">
                <a-textarea
                  show-word-limit
                  :max-length="300"
                  v-model="currForm.mainBusiness"
                  :disabled="type !== 'add' && !isEdit"
                ></a-textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watch } from 'vue';

  const props = withDefaults(
    defineProps<{
      form?: any;
      type?: string;
      isEdit?: boolean;
    }>(),
    {
      type: 'add',
      isEdit: false,
      form: {
        businessLicense: '', // 营业执照
        unifiedSocialCreditCodes: '', // 统一社会信用代码
        enterpriseName: '', // 企业名称
        legalRepresentative: '', // 法定代表人
        registrationStatus: '', // 登记状态
        establishmentDate: undefined, // 成立日期
        registeredCapital: '', // 注册资本
        paidCapital: '', // 实缴资本
        approvalDate: undefined, // 核准日期
        organizationCode: '', // 组织机构代码
        businessNo: undefined, // 工商注册号
        taxpayerNo: undefined, // 纳税人号
        enterpriseType: '', // 企业类型
        operationTerm: '', // 营业期限
        taxpayerQualification: '', // 纳税人资质
        industrySector: '', // 所属行业
        localArea: '', // 所属地区
        registrationAuthority: '', // 登记机关
        personnelSize: '', // 人员规模
        insuredPeople: undefined, // 参保人数
        formerName: '', // 曾用名
        englishName: '', // 英文名
        enterpriseCode: '', // 进出口企业代码
        registeredAddress: '', // 注册地址
        mainBusiness: '', // 主要经营
        file: [{ fileAddr: '', name: '' }],
      },
    }
  );
  const currFormRef = ref();
  const currForm: any = computed(() => props.form);

  let fileList = computed({
    get() {
      return currForm.value.file.length && currForm.value.file[0].fileAddr
        ? [
            {
              fileUrl: currForm.value.file[0].fileAddr,
              fileName: currForm.value.file[0].name,
            },
          ]
        : [];
    },
    set(val: any[]) {
      if (val[0]) {
        currForm.value.file.push({
          addr: val[0].sourceAddr,
          name: val[0].fileName,
          fileAddr: val[0].fileUrl,
        });
      } else {
        currForm.value.file = [];
      }
    },
  });

  defineExpose({ currForm, currFormRef });
</script>

<style scoped lang="less">
  .enterprise-info {
    // margin-top: 66px;
    table {
      // padding: 50px;

      width: 100%;
      box-sizing: border-box;
      border-color: #ffffff;
      tr {
        height: 58px;
        text-align: center;
      }
      td:nth-child(odd) {
        background-color: #f5f7fa;
        // padding-left: 10px;
      }
      :deep(.arco-input-wrapper),
      :deep(.arco-textarea),
      :deep(.arco-picker),
      :deep(.arco-textarea) {
        background-color: #fff;
      }
      :deep(.arco-form-item) {
        transform: translateY(30%);
      }
      // :deep(.arco-textarea) {
      //   background-color: #fff;
      // }
      :deep(.arco-input-wrapper .arco-input.arco-input-size-medium),
      :deep(.arco-picker) {
        height: 58px;
      }
    }
  }
</style>
